<template>
	<view class="">
		<view class="body">
		<view style="display:flex; margin-bottom: 20rpx; justify-content: center;">
					 <u-icon name="checkbox-mark" size="28" color="#46a6f8"></u-icon>
			<view class="order-title">
				{{ msg }}
			</view>
		</view>
			<view class="baby_box">
				<img class="baby_left" :src="imgUrl + orderObj.baseImg" alt="" />
				<view class="baby_center">
					<view class="top">
						{{ orderObj.monName }}
					</view>
					<view class="btm"></view>
				</view>
				<view class="baby_right">
					<u-icon name="arrow-right" color="#ffffff" size="14"></u-icon>
				</view>
			</view>
			<view class="details_box" :style="orderObj.status == 1 ? 'height: 216rpx;' : ''">
				<text class="tit">订单详情</text>
				<view class="details_label">
					订单金额 :
					<text class="details_value">
						{{ orderObj.price }}
					</text>
				</view>
				<view class="details_label">
					订单号 :
					<text class="details_value">{{ orderObj.orderNo }}</text>
					<image @click="clickCopy" class="copy" :src="imgUrl+'/static/images/iconimgpopoak47.png'"
						alt="" srcset=""></image>
				</view>
			</view>
			<view class="explanation">
				<view class="tit">说明</view>
				<view class="top">一、在账号有待支付订单时，不允许购买其他藏品。</view>
				<view class="btm">二、同一账号一段时间内累计取消3次订单，将会被限购一段时间。</view>
			</view>
			<view class="foot">
				<view class="cancel" @click="goCollect">藏馆</view>
				<view class="buy" @click="goMarket">继续购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/config.js';
	import {
		getOrderDetailSucceess
	} from '@/api/work/market.js';
	import constant from '../../utils/constant';
	export default {
		data() {
			return {
				orderId: 0,
				orderObj: {},
				imgUrl: config.gillUrl,
				imgUrl: config.imgUrl,
				msg: ''
			};
		},
		onLoad(opotions) {
			this.id = opotions.id;
			this.orderId = opotions.orderId;
			this.getOrderDetail();
		},
		created() {},
		methods: {
			// 获取订单详情
			async getOrderDetail() {
				let param = {};
				param.orderId = this.orderId;
				param.orderSource = 3;
				const res = await getOrderDetailSucceess(param);
				this.orderObj = res.data.detail;
				this.msg = res.data.msg;
			},
			goMarket() {
				uni.switchTab({
					url: '/pages/work/market'
				});
			},
			goCollect() {
				uni.navigateTo({
					url: '/pages/work/message'
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.order-title {
		color: #46A6F8;
		font-weight: 800;
		font-size: 30rpx;
		margin-top: 8rpx;
	}
	.body {
		margin: 0 34rpx;

		.time_top {
			color: #ffffff;
			margin: 34rpx 0;
			display: flex;
			justify-content: center;
		}
	}
	.baby_box {
		margin-bottom: 38rpx;
		display: flex;
		align-items: center;
		width: 680rpx;
		height: 181rpx;
		background: #130F26;
		box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		opacity: 1;

		.baby_left {
			margin: 34rpx;
			width: 112rpx;
			height: 112rpx;
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			opacity: 1;
		}

		.baby_center {
			width: 440rpx;
			display: flex;
			height: 100%;
			flex-direction: column;
			justify-content: space-evenly;

			.top {
				font-size: 28rpx;
				font-family: "font";
				font-weight: 400;
				color: #ffffff;
			}

			.btm {
				font-size: 28rpx;
				font-family: "font";
				font-weight: 400;
				color: #8a92a3;
			}
		}
	}

	::v-deep.u-count-down__text {
		color: #ffffff !important;
	}

	.details_box {
		padding: 17rpx 31rpx 34rpx 34rpx;
		width: 680rpx;
		height: 220rpx;
		background: #130F26;
		box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		opacity: 1;

		.tit {
			display: block;
			font-size: 28rpx;
			font-family: 迷你简琥珀-Regular, 迷你简琥珀;
			font-weight: 400;
			color: #ffffff;
			margin-bottom: 34rpx;
		}

		.details_label {
			display: flex;
			font-size: 28rpx;
			font-family: "font";
			font-weight: 400;
			color: #8a92a3;
			margin-bottom: 17rpx;

			.copy {
				width: 26rpx;
				height: 26rpx;
			}
		}

		.details_value {
			display: block;
			margin-left: 10rpx;
			width: 475rpx;
			font-size: 28rpx;
			font-family: "font";
			font-weight: 400;
			color: #ffffff;

			.decimal-part {
				font-size: 12px; 
			}
		}
	}

	.explanation {
		margin: 87rpx 0 0 34rpx;

		.tit {
			font-size: 24rpx;
			font-family: "font";
			font-weight: 400;
			color: #8a92a3;
		}

		.top {
			font-size: 21rpx;
			font-family: "font";
			font-weight: 400;
			color: #8a92a3;
		}

		.btm {
			font-size: 21rpx;
			font-family: "font";
			font-weight: 400;
			color: #8a92a3;
		}
	}

	.foot {
		position: absolute;
		bottom: 0;
		left: 0;
		text-align: center;
		line-height: 77rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 750rpx;
		height: 155rpx;
		background: #13151a;
		font-size: 28rpx;
		font-family: 'font';
		font-weight: 700;
		color: #FFFFFF;

		.cancel {
			width: 209rpx;
			height: 77rpx;
			background: #211F30;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			opacity: 1;
			border: 2rpx solid #3C424D;
		}

		.buy {
			width: 436rpx;
			height: 77rpx;
			background: #46A6F8;
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
		}
	}

	.time {
		display: flex;
		font-size: 28rpx;
		font-family: "font";
		font-weight: 400;
		color: #ffffff;

		.time__doc {
			margin-right: 10rpx;
			margin-left: 5rpx;
		}
	}

	.times_buy {
		position: absolute;
		top: 400rpx;
		width: 100%;
		height: 530rpx;
		background: #0d0e11;
		border-radius: 29rpx 29rpx 29rpx 29rpx;
		border: 2rpx solid #8a92a3;
		display: flex;
		flex-direction: column;
		align-items: center;

		.times_num {
			position: absolute;
			top: 200rpx;
			width: 345rpx;
			height: 87rpx;
			font-size: 31rpx;
			font-family: "font";
			font-weight: 400;
			color: #8a92a3;

			.times_num_2 {
				position: absolute;
				left: 30rpx;
			}

			.times_all {
				width: 120rpx;
				position: absolute;
				top: 10rpx;
				left: 230rpx;
				font-size: 30rpx;
				font-family: "font";
				font-weight: 400;
				color: #ffffff;
			}
		}

		.tmies_tit {
			margin: 50rpx 0 255rpx 0;
			height: 65rpx;
			font-size: 54rpx;
			font-family: 迷你简琥珀-Regular, 迷你简琥珀;
			font-weight: 400;
			color: #ffffff;
			line-height: 65rpx;
		}

		.times_total {
			margin-bottom: 34rpx;
			height: 42rpx;
			font-size: 31rpx;
			font-family: "font";
			font-weight: 400;
			color: #8a92a3;
			line-height: 42rpx;
		}

		.times_btm {
			position: relative;
			top: -50rpx;
			left: 0;
			width: 100%;
			text-align: center;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.times_btm_left {
				font-size: 35rpx;
				font-family: "font";
				font-weight: 400;
				color: #ffffff;
				line-height: 78rpx;
				width: 244rpx;
				height: 78rpx;
				background: linear-gradient(90deg, #3ADFEB 0%, #4463FF 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
			}

			.times_btm_right {
				width: 244rpx;
				height: 78rpx;
				background: #1c1f25;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				font-size: 35rpx;
				font-family: "font";
				font-weight: 400;
				color: #ffffff;
				line-height: 78rpx;
			}
		}
	}

	.top_iocn {
		width: 28rpx;
		height: 28rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		position: relative;
		top: 6rpx;
		right: 12rpx;
	}

	.details_box2 {
		padding: 17rpx 31rpx 34rpx 34rpx;
		width: 680rpx;
		background: #15142d;
		box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		opacity: 1;
		height: 216rpx;
	}
</style>